<template>
  <div ref="container" class="container">
    <div class="forms-container">
      <div class="signin-signup">
        <!-- 登录表单 -->
        <el-form ref="loginForm" v-loading="loading" :model="loginForm" class="sign-in-form" :rules="loginRules" auto-complete="off">
          <h2 class="title">登 录</h2>
          <el-form-item prop="name">
            <el-input v-model="loginForm.name" placeholder="账号">
              <template slot="prefix">
                <svg-icon class="form-icon" icon-class="username" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="密码" @keyup.enter.native="handleLogin">
              <template slot="prefix">
                <svg-icon class="form-icon" icon-class="password" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="btn solid" @click.native.prevent="handleLogin">
              登 录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="panels-container">
      <div class="panel left-panel">
        <div class="content">
          <h3>亿人数据管理平台</h3>
          <p>E-LINE DATA CENTER.</p>
          <p>保持对成功的渴望，保持对事物的好奇</p>
        </div>
        <img src="@/assets/login.svg" class="image" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import CryptoJS from 'crypto-js'
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        name: '',
        password: ''
      },
      loginRules: {
        name: [{ required: true, trigger: 'blur' }],
        password: [{ required: true, trigger: 'blur' }]
      },
      loading: false
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(route) {
        this.redirect = route.query && route.query.redirect
      }
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          let params = {...this.loginForm}
          this.$store.dispatch('user/login', params).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/_login.scss';
</style>